import React, { Component } from "react";
import Header from "../../components/Header/Header";
import "./components/css/index.less";
import { $pre } from "../../http/http";
import { Button, Toast } from "antd-mobile";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { actions,getList,getGood } from "../../store/modules/Detail";
class Detail extends Component {
  componentDidMount(){
    let {details:{reqList}}=this.props
    let id=this.props.match.params.id
    reqList(id)
  }
 
  // constructor() {
  //   super();
  //   this.state = {
  //     list: {},
  //     goodse:['商品',"详情","评价","推荐"]
  //   };
  // }
  // async componentDidMount() {
  //   let res = await reqgetgoodsinfo({ id: this.props.match.params.id });
  //   if (res.data.code == 200) {
  //     this.setState({
  //       list: res.data.list[0] ? res.data.list[0] : {},
  //     });
  //   }
  // }
  // async addShop(){
  //   let r=await reqcartadd({
  //     uid:JSON.parse(localStorage.getItem("isLogin")).uid,
  //     goodsid:this.props.match.params.id,
  //     num:1,
  //     type:1
  //   })
  //   if(r.data.code===200){
  //     Toast.show({
  //       content:r.data.msg
  //     })
  //   }
  // }
  render() {
    let {
    list,
    details:{addShop},
    goodse,
    match:{params}
    } = this.props;
    
    console.log(list);
    // let { list,goodse } = this.state;
    return (
      <div>
        {" "}
        <Header title="商品详情" back {...this.props}></Header>
        <header>
          <div className="headertext">{list.goodsname}</div>
          <div className="bottom">
        {goodse.map((item)=>{
          return(
            <a href="" key={item}>{item}</a>
          )
        })}
     </div>
    </header>
        <div className="banxin">
        <div className="banner"><img src={$pre+list.img} alt="" /></div>
        <aside className="aside1">
            <p>
                <a href="#">{list.price}</a>
                <span className="ccc">{list.market_price}</span>
            </p>
            <p className="banner-hd"> {list.goodsname}</p>
            <ul className="banner-xinxi">

                <li>{list.description}</li>
                <li>11.11限时299元起</li>
                <li>此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</li>
                <li>【电商洁面热销榜】第{list.isseckill}名</li>
              
            </ul>
        </aside>
    
    </div>
        <Button color="primary" onClick={()=>addShop(params)}>加入购物车</Button>
      </div>
    );
  }
}
const mapStateToprops = (state) => {
  return {
    list:getList(state),
    goodse:getGood(state)
  };
};
const mapDispatchToprops = (dispatch) => {
  return {
    details: bindActionCreators(actions, dispatch),
  };
};
export default connect(mapStateToprops, mapDispatchToprops)(Detail);
